<template>
	<view class="app">
		<authorize @onLoadFun="onLoadFun" v-model="isHidden" :isAuto="true"></authorize>
		<view class="app-container">
			<!-- 用户信息 -->
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view class="cu-avatar radius lg" :style="'background-image:url(' + userInfo.avatar_url + ');'"></view>
					<view class="content">
						<view class="username" @tap="selectRegionEvent">{{ userInfo.area_name || '请选择您的学校' }}</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">{{ address }}</view>
						</view>
					</view>
					<view class="action text-default text-xl"><view class="cuIcon-settingsfill" @tap="settings"></view></view>
				</view>
			</view>
			<view class="grid col-2 content-warp justify-start">
				<view class="flex flex-direction">
					<view class="card" @tap="selectTypeEvent(0)">
						<view class="card-content">
							<view class="text-bold text-default">文件打印</view>
							<view class="text-gray text-sm margin-top">智能预约 支持多种格式文档 轻松一键打印</view>
							<img src="/static/img/icon-hupilan.png" />
						</view>
					</view>
					<view class="card" @tap="navigateToOutput">
						<view class="card-content">
							<view class="text-bold text-default">开始打印</view>
							<view class="text-gray text-sm margin-top">云端上传文件或图片 即传即拿 支持三种取件方式</view>
							<img src="/static/img/icon-haitanghua.png" />
						</view>
					</view>
				</view>
				<view class="offset flex flex-direction">
					<view class="card" @tap="selectTypeEvent(1)">
						<view class="card-content">
							<view class="text-bold text-default">照片打印</view>
							<view class="text-gray text-sm margin-top">保护个人隐私 6寸照片留住生活美好 摄影与大家一起分享</view>
							<img src="/static/img/icon-duorou.png" />
						</view>
					</view>
					<view class="card">
						<view class="card-content">
							<view class="text-bold text-default">敬请期待</view>
							<view class="text-gray text-sm margin-top">程序猿正在努力开发中 更多精彩内容 敬请期待</view>
							<img src="/static/img/icon-hanxiucao.png" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<select-region v-model="show" :list="regionList" @selectRegion="confirmRegion" @search="getAreaInfoListEvnet"></select-region>
		<coupon-window v-model="window" :couponList="couponList" :activityId="activityId"></coupon-window>
	</view>
</template>

<script>
// 引入SDK核心类
const QQMapWX = require('@/plugins/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js');
let qqmapsdk = new QQMapWX({
	key: 'OFSBZ-RDS36-OJ5S7-MDOHB-BTT35-MYBB3'
});
import SelectRegion from '@/components/select-region/select-region';
import Authorize from '@/components/authorize/authorize';
import CouponWindow from '@/components/coupon-window/coupon-window';
import { checkLogin } from '@/common/tools/util.js';
import { getUserInfo, getAreaInfoList, changeBindingArea, checkWechatUserCustomerMessage } from '@/api/user';
import { getNewUserDiscountCoupon } from '@/api/common.js';
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			title: 'Hello',
			address: '',
			//控制地区列表dialog
			show: false,
			//控制 优惠券列表
			window: false,
			isHidden: true,
			userInfo: {
				area_id: '',
				area_name: ''
			},
			regionList: [],
			//优惠券列表
			couponList: [1,2],
			//新人优惠券活动id
			activityId: null
		};
	},
	components: {
		SelectRegion,
		CouponWindow,
		Authorize
	},
	onLoad(options) {
		getApp().globalData.spid = options.spid;
		//获取当前位置经纬度
		const latitude = getApp().globalData.latitude;
		const longitude = getApp().globalData.longitude;
		if (!latitude || !longitude) {
			uni.getLocation({
				type: 'wgs84',
				success: res => {
					getApp().globalData.latitude = res.latitude;
					getApp().globalData.longitude = res.longitude;
					this.getLocation(res);
				}
			});
		} else {
			this.getLocation({
				latitude: latitude,
				longitude: longitude
			});
		}
		this.getAreaInfoListEvnet();
	},
	//页面相关事件处理函数--监听用户下拉动作
	onPullDownRefresh: function() {
		wx.stopPullDownRefresh();
	},
	onShow() {
		const _this = this;
		wx.getSetting({
			success(res) {
				if (!res.authSetting['scope.userInfo']) {
					//查询平台新人注册活动优惠券
					// getNewUserDiscountCoupon().then(res => {
					// 	_this.couponList = res.result.discountCouponInfoList
					// 	_this.activityId = res.result.discount_coupon_activity_id
					// 	_this.window = _this.couponList.length > 0
					// })
				// } else {
					_this.window = false;
					_this.isHidden = false;
				}
			}
		});
		// this.getAreaInfoListEvnet();
	},
	methods: {
		...mapMutations({
			setUser: 'user/SET_USER'
		}),
		onLoadFun() {
			// this.getAreaInfoListEvnet();
			this.getUserInfoEvent().then(res => {
				if (!res.area_id) {
					this.show = true;
				}
			});
		},
		/**
		 * 获取用户信息
		 */
		getUserInfoEvent() {
			return new Promise((resolve, reject) => {
				getUserInfo().then(res => {
					this.setUser(res.result);
					this.userInfo = res.result;
					resolve(res.result);
				});
			});
		},
		/**
		 * 获取地区信息列表
		 */
		getAreaInfoListEvnet(keyword) {
			getAreaInfoList({
				keyword: keyword || ''
			}).then(res => {
				this.regionList = res.result.showing;
			});
		},
		/**
		 * 点击预约上传
		 * 跳转至选择类型页面
		 */
		selectTypeEvent(type) {
			const _this = this;
			wx.getSetting({
				success(res) {
					if (!res.authSetting['scope.userInfo']) {
						_this.isHidden = false;
						return
					} else {
						if (!_this.userInfo.area_id) {
							_this.show = true;
							return
						}

						checkWechatUserCustomerMessage().then(res => {
							if (res.result.message === 'WITHOUT_TIME' || res.result.message === 'WITHOUT_AMOUNT') {
								uni.navigateTo({
									url: '/pages/send-customer-message'
								});
							} else {
								uni.navigateTo({
									url: `/print-pages/select-type?type=${type}`
								});
							}
						});
					}
				}
			});
		},
		navigateToOutput() {
			const _this = this;
			wx.getSetting({
				success(res) {
					if (!res.authSetting['scope.userInfo']) {
						_this.isHidden = false;
						return
					} else {
						uni.navigateTo({
							url: '/output-pages/enter-code',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}
				}
			});
		},
		/**
		 * 获取当前位置地址
		 * @param item
		 */
		getLocation({ latitude, longitude }) {
			qqmapsdk.reverseGeocoder({
				location: {
					latitude: latitude,
					longitude: longitude
				},
				success: res => {
					this.address = res.result.address;
					// console.log(res)
				},
				fail: res => {
					this.address = '暂无定位信息';
				}
			});
		},
		/**
		 * 选择区域
		 */
		selectRegionEvent() {
			if(checkLogin()) {
				this.show = true;
			}else {
				this.isHidden = false;
			}
		},
		/**
		 * 去设置页面
		 */
		settings() {
			uni.navigateTo({
				url: '/user-pages/settings',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		/**
		 * 确认区域
		 */
		confirmRegion(region) {
			changeBindingArea({
				area_id: region.area_id
			}).then(res => {
				uni.showToast({
					title: '成功确认区域',
					icon: 'success',
					duration: 2000
				});
				this.userInfo['area_name'] = region.name;
				this.userInfo['area_id'] = region.area_id;
			});
		}
	},
	onShareAppMessage() {
		return {
		  title: '欢迎使用云印小栈',
		  path: 'pages/tabbar/index',
		  imageUrl: '/static/img/wechat_share.jpg'
		}
	},
	onShareTimeline() {
		return {
		  title: '云印小栈 - 更便捷的打印方式',
		  query: 'pages/tabbar/index',
		  imageUrl: '/static/img/favicon_circle.png'
		}
	}
};
</script>

<style lang="scss">
.app {
	background: url(~@/static/img/print/print-bg.png) no-repeat bottom;
	background-size: cover;

	.app-container {
		.cu-list.menu-avatar > .cu-item:after {
			border: none;
		}

		.username {
			font-size: 30upx;
			font-weight: 600;
			color: #172575;
		}

		.content-warp {
			/*height: 100%;*/
			width: 100%;

			.flex {
				height: auto !important;
				padding: 0 10px;

				.card {
					background: #ffffff;
					min-height: 380rpx !important;
					max-height: 400rpx !important;
					border-radius: $uni-border-radius-base;
					box-shadow: $uni-box-shadow;
					padding: 16px;
					position: relative;

					&-content {
						word-break: keep-all;

						image {
							margin: 10rpx;
							height: 160rpx;
							width: 160rpx;
							position: absolute;
							right: 0;
							bottom: 0;
						}
					}
				}
			}

			.offset {
				margin-top: 15%;
			}
		}
	}
}
</style>
